import React,{useState,useEffect} from 'react'
import { Redirect } from "react-router-dom";
import './home.css'
import zhu from './images/zz.jpg';
import logo from './images/logo.png';
import $ from 'jquery';
// import './code.js'

const Home = (props) => {
    const [username,setName]=useState('');
    const [passwd,setPasswd]=useState('');
    const [vercode,setVercode]=useState('');
    const [vernum,setVernum]=useState('');

    useEffect(() => {
        getCode();
    }, [])
    
    const login=()=>{
        // 复杂版怎样得到验证码返回的正确信息        
        var code =  $(".identifying").text();
        var checkcode= $(".verCode").val();
        if (code != checkcode) {
            $(".verCode").val('');
            alert("验证码输入错误！");
            return;
        }else if(username==='zyt'&&passwd==='zhu'){
            alert("验证通过！");
            localStorage.setItem('isLogin','true');
            props.history.replace(props.location.state||'/user')
           
        }else{
            alert("用户名或密码错误！");
        }
       
    }

    const getCode=()=>{
        var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "e", 'f'];
        var str = "";
        for (let i = 0; i < 6; i++) {
            str += arr[Math.floor(Math.random() * arr.length)];
        }
        setVernum(str);
    }  

    //一登录就调用
    // console.log({vernum})//为什么输出两遍
     

    return (
    
        <div className="outerContainer">
            <div className="titleLogo"><img className="logo" src={logo}/></div>   
            <div className="innerContainer">
                <div>
                    <div className="userAvatar">
                        {/* 头像是透明的需要改一下 */}
                        <img className='userCard' src={zhu}/>
                    </div>
                    <div className="myInformation">
                        <div>用户名：<input type="text" value={username} onChange={e=>setName(e.target.value)}/> </div>
                        <div> 密&nbsp;&nbsp;&nbsp;码：<input type="password" value={passwd} onChange={(e)=>setPasswd(e.target.value)}/></div>
                        <div> 
                            验证码：<input type="text" className="verCode" value={vercode} onChange={e=>setVercode(e.target.value)}/>
                            <div className="identifying">
                                {vernum}
                            </div>
                            <a href="#" id="toggle" onClick={getCode}>看不清换一张</a>
                            {/* 第二种 */}
                             {/* <canvas id="canvas" width="100" height="30"></canvas> */}
                        </div>
                        <button className="login" onClick={login}>登录</button>
                    </div>
                </div> 
            </div>
        </div>
      
    )
}

export default Home
